<!-- 通用组件  课件、资源预览 -->
<template>
    <div class="preview">
      <!-- 原生video和audio标签支持的格式用原地址ossOriUrl，否则用转换过的地址ossGenUrl -->
      <video
        v-if="curType == 'video'"
        ref="preVideo"
        :src="fileObj.lookUrl||fileObj.ossOriUrl"
        controls="controls"
        controlslist="nodownload"
        :poster="imgUrl">
        <h2>很抱歉，您的浏览器<strong>不支持video播放</strong></h2>
        <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
      </video>
  
      <audio v-else-if="curType == 'audio'" controls="controls" ref="audioCom">
        <source :src="isHtml5Type ? fileObj.ossOriUrl : fileObj.ossGenUrl+'/file.mp3'" type="audio/mpeg" />
        <h2>很抱歉，您的浏览器<strong>不支持audio播放</strong></h2>
        <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
      </audio>
  
      <div v-else-if="curType == 'flash'">
        <embed :src="fileObj.ossOriUrl" width="760" height="400">
        <h2>很抱歉，您的浏览器<strong>不支持flash播放</strong>
          <!-- <el-button @click="download" type="text">请下载</el-button> -->
        </h2>
      </div>
  
      <div v-else-if="curType == 'office'">
        <!-- <img class="officeImg" :src="i" v-for="(i, j) in photoList" :key="j" /> -->
        <div v-if="photoList.length>0">
          <el-image
            class="officeImg"
            :src="i"
            v-for="(i, j) in photoList"
            :key="j"
            :preview-src-list="photoList">
          </el-image>
        </div>
        <div v-else style="margin: 200px 0;"> 文件正在转换，请稍后查看! </div>
      </div>
  
      <el-image
        v-else-if="curType == 'pic'"
        style="max-width: 100%;"
        :src="fileObj.ossOriUrl"
        :preview-src-list="[fileObj.ossOriUrl]">
      </el-image>
  
      <div v-else-if="curType == 'linkUrl'">
        <!-- <span v-html="fileObj"></span> -->
        <a :href="fileObj" target="_blank">{{fileObj}}</a>
      </div>
      <div v-else style="margin: 200px 0;">
        <span v-if="fileObj.ossOriUrl">当前文件类型不支持预览</span>
        <span v-if="fileObj.ossOriUrl" style="color: #4582f3;cursor: pointer;" @click="downloadIcveFile(fileObj.ossOriUrl,fileObj.title)">,请下载！</span>
        <span v-else>当前文件地址有误或失效,请更替</span>
      </div>
  
      <!-- <div v-if="curType == '其他'">
          此文件不支持预览
        </div> -->
  
    </div>
  </template>
  
  <script>
    import axios from 'axios'
    // 需要“通过文件地址转换为文件”的接口
    import {
      getFileByUrl
    } from "@/api/feedback_back/index";
    export default {
      props: {
        fileStr: Object,
      },
      data () {
        return {
          fileObj: {},
          curType: "",
          isHtml5Type: false, //是否是原生video和audio标签支持的格式
          photoList: [],
          imgUrl: ''
        }
      },
      methods: {
  
        toPre ( ossOriUrl, ossGenUrl, url ) {
          let curFileType = ossOriUrl.substring( ossOriUrl.lastIndexOf( "." ) ).toLowerCase()
          this.curType = ''
          let html5Type = [ ".mp3", ".mp4", ".WebM", ".ogg", ".wav" ]
          if ( html5Type.indexOf( curFileType ) != -1 ) {
            this.isHtml5Type = true;
          }
  
          console.log( '---', curFileType )
  
          let office = [ ".doc", ".docx", ".pptx", ".ppt", ".pdf", ".txt", ".rtf", ".xls", ".xlsx", ".wps", ".wpt", ".dps" ]
          let pic = [ ".png", ".jpeg", ".jpg", ".gif", ".bmp", ".tif", ".tiff" ] //,".wmf",'dwg'
          let video = [ ".mp4", ".WebM", ".ogg", ".flv", ".asf", ".avi", ".wmv", ".mpg", ".rm", ".rmvb", ".mov", ".mts", ".f4v", ".m4v" ]
          let audio = [ ".mp3", ".wav", ".m4a", ".3gp", ".wma", ".aac", ".flac", ".ape" ]
  
          if ( office.indexOf( curFileType ) != -1 ) {
            this.curType = "office";
          } else if ( pic.indexOf( curFileType ) != -1 ) {
            this.curType = "pic";
          } else if ( video.indexOf( curFileType ) != -1 ) {
            this.curType = "video";
            // console.log( '视频：',this.isHtml5Type ? this.fileObj.ossOriUrl : this.fileObj.ossGenUrl+'/720p.mp4' );
            this.getVideoP( ossGenUrl, ossOriUrl, url );
  
            // this.getVideoBase64( ossOriUrl )
          } else if ( audio.indexOf( curFileType ) != -1 ) {
            this.curType = "audio";
            console.log( '音频：', this.isHtml5Type ? this.fileObj.ossOriUrl : this.fileObj.ossGenUrl + '/file.mp3' );
          } else if ( ossOriUrl.toLowerCase().indexOf( ".swf" ) != -1 ) {
            this.curType = "flash";
          } else {
            this.curType = "其他";
          }
          console.log( this.curType );
          // else if(file.toLowerCase().indexOf(".flv") != -1){
          //   this.curType = "flv";
          // }
  
          if ( this.curType == "office" ) {
            console.log( 'ooooo');
            this.photoList = [];
            if(this.fileObj.status=='1' && this.fileObj.previewImgs){
              let imgs = JSON.parse(this.fileObj.previewImgs).imgs
              imgs.forEach( ( item ) => {
                this.photoList.push( ossGenUrl + "/" + item );
              } );
            }else{
              this.getViewList( ossGenUrl, ossOriUrl, url );
            }
          }
        },
        download () {
          // let fileName = this.fileNameStr || this.fileObj.fileName
          // this.downloadIcveFile(this.fileObj.ossOriUrl,fileName);
          // window.open(this.fileObj.ossOriUrl)
        },
  
        // 获取快照列表
        getViewList ( ossGenUrl, ossOriUrl, url ) {
          // this.photoList = [];
          getFileByUrl( {
            url: ossOriUrl
          } ).then( ( res ) => {
            if ( res && res.imgs ) {
              if ( !ossGenUrl ) {
                if ( ossOriUrl.indexOf( "file_doc" ) > 0 ) {
                  ossGenUrl = ossOriUrl.replace( "file_doc", "file_gen_doc" );
                } else if ( ossOriUrl.indexOf( "ssykt" ) > 0 ) {
                  ossGenUrl = ossOriUrl.replace( "ssykt", "ssykt_gen" );
                } else if ( ossOriUrl.indexOf( "doc4" ) > 0 ) {
                  ossGenUrl = ossOriUrl.replace( "doc4", "doc_gens4" );
                } else if ( ossOriUrl.indexOf( "doc2" ) > 0 ) {
                  ossGenUrl = ossOriUrl.replace( "doc2", "doc_gens2" );
                }
              }
  
              res.imgs.forEach( ( item ) => {
                this.photoList.push( ossGenUrl + "/" + item );
              } );
  
            }
          } );
        },
        // 获取视频分辨路
        getVideoP ( ossGenUrl, ossOriUrl, url ) {
          if ( url.indexOf( 'https://' ) == -1 ) {
            axios.post( `https://upload.icve.com.cn/${url}/status?time=${(new Date()).getTime()}&token=5958F068E52BCF92A7B330AD3565BF10` ).then( ( {
              data
            } ) => {
              console.log( data );
              if ( data.status == 2 ) {
                [ '360p', '480p', '720p', '1080p' ].forEach( i => {
                  if ( data.args[ i ] ) {
                    this.fileObj.lookUrl = ossGenUrl + `/${i}.mp4`
                  }
                } )
                if ( !this.fileObj.lookUrl ) {
                  this.fileObj.lookUrl = ossOriUrl
                }
              } else {
                this.fileObj.lookUrl = ossOriUrl
                // this.$message({
                //   message: '正在转码中...',
                //   type: 'warning'
                // });
              }
              this.getVideoBase64( this.fileObj.lookUrl )
            } )
          }
        },
  
        //设置video封面
        getVideoBase64 ( ossOriUrl ) {
          let dataURL = '';
          let video = document.createElement( "video" );
          video.setAttribute( 'crossOrigin', 'anonymous' ); //处理跨域
          video.setAttribute( 'src', ossOriUrl );
          video.setAttribute( 'width', 1280 );
          video.setAttribute( 'height', 736 );
          video.currentTime = 2;
          video.addEventListener( 'loadeddata', () => {
            let canvas = document.createElement( "canvas" );
            let width = video.width; //canvas的尺寸和图片一样
            let height = video.height;
            canvas.width = width;
            canvas.height = height;
            canvas.getContext( "2d" ).drawImage( video, 0, 0, width, height ); //绘制canvas
            dataURL = canvas.toDataURL( 'image/jpeg' ); //转换为base64
            this.imgUrl = dataURL;
            // console.log('this.imgUrl',this.imgUrl)
          } );
        },
      },
  
      watch: {
        fileStr: {
          handler ( e ) {
            console.log( '传到公共预览组件的值', e );
            if ( e ) {
              this.curType = '';
              this.imgUrl = ''
              this.fileObj = {}
              this.fileObj = e
  
              if ( this.fileObj.ossOriUrl ) {
                if ( !this.fileObj.url && !this.fileObj.fileShortUrl ) return this.$message.error( '文件找不到，请重新上传！' );
                this.toPre( this.fileObj.ossOriUrl, this.fileObj.ossGenUrl, this.fileObj.url || this.fileObj.fileShortUrl )
              } else {
                this.curType = 'linkUrl'
              }
              console.log( '通用文件预览：', this.fileObj )
            } else {
              if ( this.curType == "video" ) {
                // console.log(this.$refs.preVideo,666)
                this.$refs.preVideo.pause();
              }
            }
          },
          deep: true,
          immediate: true,
        }
      },
      created () {
        
      },
      beforeDestroy () {
        // console.log(111);
        if ( this.curType == 'audio' ) this.$refs.audioCom.pause()
        if ( this.curType == 'video' ) this.$refs.preVideo.pause()
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .preview {
      text-align: center;
  
      video {
        width: 85%;
      }
  
      audio {
        width: 400px;
        margin-top: 200px;
      }
  
      .officeImg {
        width: 90%;
        display: block;
        margin: 0 auto;
        border-bottom: 1px solid #dddddd;
  
        &:last-child {
          border-bottom: none;
        }
      }
  
      .pic {
        max-width: 100%;
      }
    }
  </style>
  